<template>
  <div class="home">
      <Login v-if="showLogin" @close="showLogin=false" />
      <template v-if="user._id">
          <div class="main">
              <div class="revise">
                  <div class="revise-left">
                      <div class="revise-num">
                          {{reviseNum}}
                          <span>待温习</span>
                      </div>
                  </div>
                  <div class="revise-right">
                      <div class="revise-title">温故而知新</div>
                      <div class="revise-hint">{{reviseNum?'早晚各复习一次，两周完全掌握！':'当前没有待复习内容，快去学习新知识吧~'}}</div>
                      <div v-if="reviseNum" class="revise-button" @click="goRevise">开始复习</div>
                  </div>
              </div>
              <div class="hint">华夏的积淀：</div>
              <div class="learn">
                  <div class="learn-list" @click="goLearn('cn1')">
                      <div class="list-title">关卡 1：一次千年纵横</div>
                      <div class="list-hint">中华上下五千年</div>
                      <div class="list-more">{{ getListHint('cn1') }}</div>
                      <div class="list-hover"></div>
                  </div>
                  <div class="learn-list" @click="goLearn('cn2')">
                      <div class="list-title">关卡 2：一次千年纵横</div>
                      <div class="list-hint">中华上下五千年</div>
                      <div class="list-more">{{ getListHint('cn2') }}</div>
                      <div class="list-hover"></div>
                  </div>
                  <div class="learn-list" @click="goLearn('cn3')">
                      <div class="list-title">关卡 3：一次千年纵横</div>
                      <div class="list-hint">中华上下五千年</div>
                      <div class="list-more">{{ getListHint('cn3') }}</div>
                      <div class="list-hover"></div>
                  </div>
                  <div class="learn-list" @click="goLearn('cn4')">
                      <div class="list-title">关卡 4：一次千年纵横</div>
                      <div class="list-hint">中华上下五千年</div>
                      <div class="list-more">{{ getListHint('cn4') }}</div>
                      <div class="list-hover"></div>
                  </div>
                  <div class="learn-list" @click="goLearn('cn5')">
                      <div class="list-title">关卡 5：一次千年纵横</div>
                      <div class="list-hint">中华上下五千年</div>
                      <div class="list-more">{{ getListHint('cn5') }}</div>
                      <div class="list-hover"></div>
                  </div>
                  <div class="learn-list" @click="goLearn('cn6')">
                      <div class="list-title">关卡 6：一次千年纵横</div>
                      <div class="list-hint">中华上下五千年</div>
                      <div class="list-more">{{ getListHint('cn6') }}</div>
                      <div class="list-hover"></div>
                  </div>
              </div>
          </div>
      </template>
      <div v-else class="main">
          <div class="header">欢迎来到星星学苑</div>
          <img src="../static/icons/logo.svg" />
          <div class="start" @click="showLogin=true">登录学苑</div>
      </div>
  </div>
</template>

<script>
import Login from '@/components/Login'
import cn from '@/api/cn'

export default {
name: 'cnhome',
components: {
  Login
},
mounted () {
  this.$event.on('login', this, () => { this.showLogin = true })
  setTimeout(() => {
    this.getListProgress()
    this.getReviseNum()
  }, 200)
},
data () {
  return {
    showLogin: false,
    reviseNum: 0,
    listProgress: {}
  }
},
computed: {
  user () {
    return this.$store.state.user
  }
},
methods: {
  getListProgress () {
    cn.getUserProgress().then((pro) => {
      var progress = JSON.parse(JSON.stringify(pro.data))
      this.listProgress = progress || {}
    }).catch(err => console.log(err))
  },
  getReviseNum () {
    cn.getReviseWordNum().then((num) => {
      this.reviseNum = num
    }).catch(err => console.log(err))
  },
  getListHint (listName) {
    const progress = this.listProgress[listName]
    const wordNum = cn.getListWordNum(listName)
    if (progress) {
      const learnedNum = progress.location
      if (learnedNum >= wordNum) return '已完成学习'
      let hour = parseInt((wordNum - learnedNum) / 100)
      let min = parseInt(0.6 * ((wordNum - learnedNum) % 100))
      return `已学习${learnedNum}诗词，学完还需${hour ? hour + '小时' : ''}${min ? min + '分钟' : ''}`
    } else {
      let hour = parseInt(wordNum / 100)
      let min = parseInt(0.6 * (wordNum % 100))
      return `尚未开始，预计花费${hour ? hour + '小时' : ''}${min ? min + '分钟' : ''}`
    }
  },
  goRevise () {
    this.$router.push('/revise')
  },
  goLearn (listName) {
    this.$router.push(`/cn?list=${listName}`)
  }
}
}
</script>

<style scoped>
.home {
width: 100vw;
height: 100vh;
background: #F0F0F0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.main {
height: fit-content;
padding: 110px 30px;
box-sizing: border-box;
max-width: 1000px;
margin: 0 auto;
}

.revise {
width: 100%;
background: #e0d07e;
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .24);
border-radius: 4px;
padding: 35px;
box-sizing: border-box;
display: flex;
}

.revise-left {
width: 140px;
display: flex;
align-items: center;
justify-content: center;
}

.revise-num {
width: 115px;
height: 115px;
border-radius: 50%;
border: 9px solid #1bd3fc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 25px;
color: #17917c;
font-weight: 600;
border: 8px solid #46c4da;
}

.revise-num span {
margin-top: 6px;
font-size: 15px;
color: #455358;
font-weight: 700;
}

.revise-right {
width: calc(100% - 140px);
height: 100%;
padding-left: 35px;
box-sizing: border-box;
}

.revise-title {
width: 100%;
font-size: 36px;
font-weight: 700;
color: #455358;
text-align: left;
}

.revise-hint {
width: 100%;
color: #455358;
font-size: 17px;
margin-top: 15px;
text-align: left;
}

.revise-button {
width: 220px;
height: 64px;
margin-top: 30px;
background: #3CCFCF;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 600;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.5s ease;
}

.revise-button:hover {
background: #F9CC28;
color: #455358;
}

.hint {
width: 100%;
font-weight: 600;
font-size: 18px;
color: #455358;
margin-top: 30px;
text-align: left;
}

.learn {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 15px;
}

.learn-list {
width: 32%;
border-radius: 5px;
box-shadow: 0 0 1.5px 0 rgba(0,0,0,.24);
background: #e0d07e;
padding: 20px 0 20px 20px;
box-sizing: border-box;
margin-bottom: 20px;
cursor: pointer;
position: relative;
overflow: hidden;
}

.list-hover {
width: 100%;
height: 5px;
background: #F9CC28;
opacity: 0;
transition: all 0.4s;
position: absolute;
bottom: 0;
left: 0;
}

.learn-list:hover .list-hover {
opacity: 1;
}

.list-title {
width: 100%;
font-size: 21px;
font-weight: 700;
color: #2d2156;
text-align: left;
}

.list-hint {
width: 100%;
color: #037e8e;
font-size: 14px;
margin-top: 8px;
text-align: left;
font-weight: 700;
}

.list-more {
width: 100%;
color: #455358;
font-size: 13px;
margin-top: 35px;
text-align: left;
font-weight: 600;
}

.header {
width: 100%;
color: #40BC96;
text-align: center;
font-size: 42px;
letter-spacing: 3px;
font-weight: bold;
margin-top: 40px;
margin-bottom: 80px;
}

.start {
width: 240px;
height: 64px;
margin: 100px auto 0 auto;
background: #3CCFCF;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
letter-spacing: 2px;
text-decoration: none;
transition: all 0.5s ease;
cursor: pointer;
}

.start:hover {
background: #F9CC28;
color: #455358;
}

.info {
position: absolute;
bottom: 0;
height: 80px;
width: 100%;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
color: #999999;
line-height: 30px;
cursor: pointer;
}

.info span {
font-size: 14px;
}
</style>
